<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style type="text/css">
        body,
        html {
            height: 100%;
        }
    </style>
    <!-- 引入 echarts.js -->
    <!-- script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script -->
    <!-- script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.8/echarts-gl.min.js"></script -->
    <script src="./echarts.js"></script>
    <script src="./echarts-gl.js"></script>
</head>

<!-- https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js -->
<!-- https://echarts.apache.org/zh/option.html#series-line.encode   -->

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:100%;height:80%;"></div>
    <script type="text/javascript">

        // 需要注释掉它
        // import * as echarts from 'echarts';
        // import 'echarts-gl';

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        var option_line = {
            tooltip: {
                // tooltip（提示框组件）
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                },
            },
            xAxis: {
                type: 'value',
                name: 'x:cate_x', // 坐标轴名称。不写也没事, 同时赋值之后可以在坐标轴上显示名称,
            },
            yAxis: {
                type: 'value',
                name: 'y:cate_score',
            },
            series: {
                type: 'line',
                dimensions: ['cate_x', 'cate_y', 'cate_z', 'cate_score'],
                // https://echarts.apache.org/zh/option.html#series-line.encode
                // 当使用 dimensions 给维度定义名称后，encode 中可直接引用名称，
                encode: {
                    x: 0, // 表示维度 0 映射到 x 轴。(第1列)
                    y: 3, // 表示维度 3 映射到 y 轴。(第4列)
                },
                data: [
                    // 每一列称为一个『维度』。
                    // 这里分别是维度 0、1、2、3。
                    [1, 1, 1, -2],
                    [2, 2, 2, -1],
                    [3, 3, 3, +0],
                    [4, 4, 4, +1],
                    [5, 5, 5, +2],
                    [6, 6, 6, +1],
                    [7, 7, 7, +0],
                    [8, 8, 8, -1],
                    [9, 9, 9, -2],
                ],
            },
        };

        var option_bar3D = {
            tooltip: {
            },
            visualMap: {
                calculable: false, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
                // https://echarts.apache.org/zh/option.html#visualMap-continuous.dimension
                dimension: 3, // 表示维度 3 映射到视觉元素上。(第4列)
                min: 10,
                max: 90,
                precision: 3, // 数据展示的小数精度，默认为0，无小数点。
                inRange: {
                    // 意思就是以这几个点作为基准，形成一种『渐变』的色带，数据映射到这个色带上。
                    color: [
                        '#313695',
                        '#4575b4',
                        '#74add1',
                        '#abd9e9',
                        '#e0f3f8',
                        '#ffffbf',
                        '#fee090',
                        '#fdae61',
                        '#f46d43',
                        '#d73027',
                        '#a50026',
                    ],
                },
            },
            grid3D: {
            },
            xAxis3D: {
                type: 'value',
                name: 'x:cate_x', // 坐标轴名称。不写也没事, 同时赋值之后可以在坐标轴上显示名称,
            },
            yAxis3D: {
                type: 'value',
                name: 'y:cate_y',
            },
            zAxis3D: {
                type: 'value',
                name: 'z:cate_score',
            },
            series: {
                type: 'bar3D',
                dimensions: ['cate_x', 'cate_y', 'cate_z', 'cate_score'],
                // https://echarts.apache.org/zh/option.html#series-bar.encode
                // 当使用 dimensions 给维度定义名称后，encode 中可直接引用名称，
                encode: {
                    x: 0, // 表示维度 0 映射到 x 轴。(第1列)
                    y: 1, // 表示维度 1 映射到 y 轴。(第2列)
                    z: 3, // 表示维度 3 映射到 z 轴。(第4列)
                    tooltip: [0, 1, 3], // 使用维度 0,1,3 的值在 tooltip 中显示, 否则显示所有维度,
                },
                data: [
                    // 每一列称为一个『维度』。
                    // 这里分别是维度 0、1、2、3。
                    [1, 1, 1, 10],
                    [2, 2, 2, 20],
                    [3, 3, 3, 30],
                    [4, 4, 4, 40],
                    [5, 5, 5, 50],
                    [6, 6, 6, 60],
                    [7, 7, 7, 70],
                    [8, 8, 8, 80],
                    [9, 9, 9, 90],
                ],
                // https://echarts.apache.org/zh/option-gl.html#globe.shading
                shading: 'lambert', // 地球中三维图形的着色效果。'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
            },
        };

        var option_scatter3D = {
            tooltip: {
            },
            visualMap: {
                calculable: true, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
                // https://echarts.apache.org/zh/option.html#visualMap-continuous.dimension
                dimension: 3, // 表示维度 3 映射到视觉元素上。(第4列)
                min: 10,
                max: 90,
                precision: 3, // 数据展示的小数精度，默认为0，无小数点。
                itemHeight: 300, // 图形的高度，即长条的高度。
                inRange: {
                    // 意思就是以这几个点作为基准，形成一种『渐变』的色带，数据映射到这个色带上。
                    color: [
                        '#1710c0',
                        '#0b9df0',
                        '#00fea8',
                        '#00ff0d',
                        '#f5f811',
                        '#f09a09',
                        '#fe0300',
                    ],
                },
            },
            grid3D: {
            },
            xAxis3D: {
                type: 'value',
                name: 'x:cate_x', // 坐标轴名称。不写也没事, 同时赋值之后可以在坐标轴上显示名称,
            },
            yAxis3D: {
                type: 'value',
                name: 'y:cate_y',
            },
            zAxis3D: {
                type: 'value',
                name: 'z:cate_z',
            },
            series: {
                type: 'scatter3D',
                dimensions: ['cate_x', 'cate_y', 'cate_z', 'cate_score'],
                // https://echarts.apache.org/zh/option.html#series-scatter.encode
                // 当使用 dimensions 给维度定义名称后，encode 中可直接引用名称，
                encode: {
                    x: 0, // 表示维度 0 映射到 x 轴。(第1列)
                    y: 1, // 表示维度 1 映射到 y 轴。(第2列)
                    z: 2, // 表示维度 2 映射到 z 轴。(第3列)
                },
                data: [
                    // 每一列称为一个『维度』。
                    // 这里分别是维度 0、1、2、3。
                    [1, 1, 1, 10],
                    [2, 2, 2, 20],
                    [3, 3, 3, 30],
                    [4, 4, 4, 40],
                    [5, 5, 5, 50],
                    [6, 6, 6, 60],
                    [7, 7, 7, 70],
                    [8, 8, 8, 80],
                    [9, 9, 9, 90],
                ],
                symbolSize: 8, // 标记的大小，(疑似为: 每个数据的图形大小)
                itemStyle: {
                    borderWidth: 0.3, // 描边线宽。为 0 时无描边。
                    borderColor: 'rgba(255,255,255,0.1)', // 图形的描边颜色。
                },
            },
        };

        myChart.setOption(option_scatter3D);

        function setValue(type_name, head_data, body_data) {
            var option;

            if (type_name == "line") {
                option = option_line;

                option.xAxis.name = "x:" + head_data[option.series.encode.x];
                option.yAxis.name = "y:" + head_data[option.series.encode.y];
            } else if (type_name == "bar3D") {
                option = option_bar3D;

                option.xAxis3D.name = "x:" + head_data[option.series.encode.x];
                option.yAxis3D.name = "y:" + head_data[option.series.encode.y];
                option.zAxis3D.name = "z:" + head_data[option.series.encode.z];

                option.visualMap.min = body_data.map((arr) => { return arr[arr.length - 1]; }).reduce((a, b) => a < b ? a : b);
                option.visualMap.max = body_data.map((arr) => { return arr[arr.length - 1]; }).reduce((a, b) => a > b ? a : b);
            } else if (type_name == "scatter3D") {
                option = option_scatter3D;

                option.xAxis3D.name = "x:" + head_data[option.series.encode.x];
                option.yAxis3D.name = "y:" + head_data[option.series.encode.y];
                option.zAxis3D.name = "z:" + head_data[option.series.encode.z];

                option.visualMap.min = body_data.map((arr) => { return arr[arr.length - 1]; }).reduce((a, b) => a < b ? a : b);
                option.visualMap.max = body_data.map((arr) => { return arr[arr.length - 1]; }).reduce((a, b) => a > b ? a : b);
            }

            if (option) {
                option.series.dimensions = head_data;
                option.series.data = body_data;

                myChart.clear(); // 清空当前实例，会移除实例中所有的组件和图表。
                myChart.setOption(option);
            }
        }

    </script>
</body>

</html>